<template>
    <div class="header-bg">
        <div>
            <!-- 头部 -->
            <div class="header" @click="$router.push({ path: '/j' })">
                <img class="l" src="https://27662808.s143i.faiusr.com/2/1/AI8BCAAQAhgAIMaysogGKKa28t8HMJADOJAD.jpg"
                    style="margin-top:0" alt="">
                <div class="hair"> 美业-美发店 </div>
                <div><i class="el-icon-s-unfold"></i></div>
            </div>
            <!-- 内容 -->
            <div class="card-bg">
                <div class="banner">
                    <div>
                        <img src="https://i.postimg.cc/0yKXCkht/Wechat-IMG98.jpg" width="40" height="40" alt="">
                        <div class="sex">
                            <div v-if="sex === 'male'" class="el-icon-male"></div>
                            <div v-if="sex === 'female'" class="el-icon-female"></div>
                        </div>
                    </div>

                    <div class="huiyuan">
                        <div class="k1">尊敬的孔令峰先生 &nbsp; &nbsp; &nbsp; 下午好</div>
                        <van-icon name="vip-card-o" size="28" />
                        <span
                            style="position: absolute; top: 50%; left: 36.5%; transform: translate(-50%, -50%);">普卡会员</span>

                    </div>
                    <div class="erwei" @click="show = true">
                        <van-icon name="qr" size="25" />
                        <div class="hym">会员码</div>
                    </div>

                </div>



                <div class="wz">
                    <span>NO.</span><span class="member-num">1</span>
                </div>
            </div>
            <van-dialog v-model="show" title="会员码" class="ew">
                <!-- <div class="ew-h"></div> -->
                <!-- <div class="j">{{ res }}</div> -->
               
                <img src="https://i.postimg.cc/9QkxrJYw/Wechat-IMG99.jpg" alt="">
                <div class="time">
                    <!-- <p>{{ res }}</p> -->
                </div>
                <!-- <vue-qr text="Hello world!" :size="250" style="margin-left: 34px;"></vue-qr> -->
            </van-dialog>
            <div class="level">
                <div class="level-text">尊享更多登记权益</div>
                <button class="level-btn">了解详情</button>
            </div>
            <!-- 内容结束 -->
            <!-- 头部结束 -->
            <!-- 内容开始 -->
            <div>

            </div>
            <div class="card">
                <div class="card-title" @click="$router.push({ path: '/entry' })">
                    <div class="card-left">
                        <i><van-icon name="card" color="rgb(255, 51, 102)" size="22" /></i>
                    </div>
                    <div class="card-right">
                        <span style="font-size:14px;color:#898989">卡项</span>
                        <span style="font-size:20px">0</span>
                    </div>
                </div>
            </div>
            <van-grid :border="false" :column-num="3" class="b">

                <van-grid-item icon="label-o" size="40" text="我的订单" @click="link1">

                </van-grid-item>
                <van-grid-item icon="todo-list-o" size="40" text="预约记录" @click="link2">
                </van-grid-item>
                <van-grid-item icon="shopping-cart-o" size="40" text="购物车" @click="link3">
                </van-grid-item>
                <van-grid-item icon="completed-o" size="40" text="我的权益" @click="link4">
                </van-grid-item>
                <van-grid-item icon="chat-o" size="40" text="我的消息" @click="link5">
                </van-grid-item>
                <van-grid-item icon="description-o" size="40" text="我的表单" @click="link6">
                </van-grid-item>
                <van-grid-item icon="orders-o" size="40" text="服务日志" @click="link7">
                </van-grid-item>
                <!-- <van-grid-item icon="sign" size="40" text="服务计划">
                </van-grid-item> -->
                <!-- <van-grid-item icon="bag-o" size="40" text="我的拼团">
                </van-grid-item> -->
                <!-- <van-grid-item icon="cash-o" size="40" text="会员充值">
                </van-grid-item> -->
                <!-- <van-grid-item icon="bullhorn-o" size="40" text="推广有礼">
                </van-grid-item> -->
                <!-- <van-grid-item icon="shop-collect-o" size="40" text="积分商城">
                </van-grid-item> -->
                <!-- <van-grid-item icon="guide-o" size="40" text="公众号通知">
                </van-grid-item> -->
            </van-grid>


        </div>
        <bottom></bottom>
    </div>
</template>

<script>
import Bottom from "@/components/bottom.vue"
import Vue from 'vue';
import { Dialog } from 'vant';
Vue.use(Dialog);


export default {
    components: {
        Bottom
    },
    data() {
        return {
            // dynamicDate:'',
            show: false,
            currentTimestamp: new Date(),
            timer: '',
            res: '',
            sex: 'female',
            time:''
        };
    },
    methods: {
        link1() {
            this.$router.push({ path: '/orders' })
        },
        link2() {
            this.$router.push({ path: '/reservationSJ' })
        },
        link3() {
            this.$router.push({ path: '/shops' })
        },
        link4() {
            this.$router.push({ path: '/equity' })
        },
        link5() {
            this.$router.push({ path: '/messageSJ' })
        },
        link6() {
            this.$router.push({ path: '/myfrom' })
        },
        link7() {
            this.$router.push({ path: '/log' })
        },
       
    },
    mounted() {
 
    },
}

</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

footer {
    width: 100%;
    height: 44px;
    background: #fff;
    position: absolute;
    bottom: 30px;
}

.k1 {
    font-size: 14px;
}

.j {
    margin-left: 80px;
}

.header-bg {
    background-color: #f7f7f7;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.ew img {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 70px;
}

.header {
    position: relative;
    text-align: left;
    display: flex;
    padding-left: 35px;
    padding-top: 15px;


}

.el-icon-s-unfold {
    font-size: 18px;
}

.header img {
    border-radius: 15px;
    width: 18px;
    height: 18px;
    background: #fff;
    display: flex;
    float: left;
    position: absolute;
    left: 15px;
}

.header .hair {
    width: 299px;
    height: 22px;
    padding-left: 15px;
    font-size: 12px;
    font-weight: 500;
}

.card-bg {
    width: 345px;
    height: 120px;
    background: #221c19;
    color: #FFEDDA;
    background-size: 100% 100%;
    border-radius: 15px;
    margin-left: 15px;
    margin-top: 10px;
    position: relative;
    background: linear-gradient(90deg, #221c19, #312822);


}

.el-icon-male {
    margin-top: -5px;
}

.card-bg .banner {
    display: flex;
}

.card-bg .banner .huiyuan {
    width: 237px;
    height: 38px;
    padding-top: 15px;
    margin-left: 15px;
    font-weight: bold;
    font-size: 15px;
}

.card-bg .banner .huiyuan span {
    font-size: 12px;
    padding-left: 4px;
    padding-right: 4px;
    margin-top: -10px;
    background-color: #f5af00
}

.card-bg .wz {
    margin-top: 25px;
    margin-left: 20px;
}

.el-icon-medal {
    margin-top: 8px;
    font-size: 12px;
}

.card-bg .banner .erwei {
    margin-top: 14px;
    margin-right: 15px;
}

.card-bg .banner .erwei i {
    margin-left: 5px;
}


.card-bg .banner .erwei div {
    width: 36px;
    height: 22px;
    margin-right: 8px;
}

.card-bg img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: 15px;
    margin-left: 15px;
    position: relative
}

.card-bg .sex {
    position: absolute;
    left: 40px;
    top: 40px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;

}

.el-icon-full-screen {
    font-size: 18px;
    width: 16px;
    height: 16px;
}

.member-list {
    width: 100%;
    height: 100%;
    background: #fff;
}

.member-num {
    font-size: 12px;
    font-weight: 600;
}

.level {
    width: 345px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -15px;
    padding: 15px 15px 0;
    background: linear-gradient(90deg, #dca87b, #e4c29f);
    box-shadow: 0 4px 9px 0 rgba(44, 38, 34, .06);
    border-radius: 10px;
    box-sizing: border-box;
    height: 50px;
    margin-left: 15px;

}

.level-text {
    font-size: 14px;
    font-weight: 600;
    color: #26201d;
}

.level-btn {
    width: 72px;
    height: 23px;
    background: #221c19;
    border: 1px solid #333;
    border-radius: 20px;
    color: #FFEDDA;
    text-align: center;
    font-size: 12px;
    font-weight: 600;

}

.card-title {
    width: 355px;
    height: 74px;
    border-radius: 10px;
    display: flex;
    margin-left: 10px;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px #d4d0d0
}

.card-left {
    width: 40px;
    height: 40px;
    background-color: #faf2e7;
    border-radius: 30px;
    position: relative;
    margin-top: 15px;
    margin-left: 15px;
}

.card-left i {
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    margin-left: 15px;
    font-size: 16px;
}

.van-grid {
    width: 345px;
    height: 100%;
    background-color: #fff;
    margin-left: 15px;
    margin-top: 20px;
    box-shadow: 0 0 5px #d4d0d0
}

.van-grid-item {
    width: 110px;
    height: 100%;
    border-radius: 555px;
}

.el-icon-male {
    margin-left: 2px;
    font-size: 13px;
    color: rgb(0, 119, 255);
}

.el-icon-female {
    margin-left: 2px;
    font-size: 13px;
    color: rgb(255, 0, 191);
}

.time {
    font-size: 14px;
    font-weight: 600;
    padding-left: 95px;
}
</style>
